<template>
    <div>
         <div class="topnewtab">
             <div class="tonumber">共计{{$store.state.noticeHidden.length}}条</div>
             <div class="selectnumber">选择：{{selectId.length}}条</div>
         </div>
        <div class="standard-wrap">
              <template v-for="(item,index) in menulist">
                    <div class="form-item form-item-style1 looktest">
                            <div class="label-title">
                                <label class="lookmsgTwo">{{item.category}}
                                <!--<span>（90分）</span>-->
                                </label>
                            </div>
                            <group>
                                <cell
                                is-link
                                :border-intent="false"
                                :arrow-direction="showarr[index]? 'up' : 'down'"
                                @click.native="showmsg(index)"><span class="selectspan">{{item.child.length}}条</span></cell>
                            </group>
                    </div>
                        <template v-if="showarr[index]">
                             <div v-for="(itemlist,indexlist) in item.child"  class="showmsg" @click="selecteitem(itemlist,index,indexlist)">
                                <p>
                                     <i class="iconfont checkbox"
                                        :class="[itemlist.checked?'icon-selected':'icon-checkbox-noselected']"></i>
                                        <span>{{itemlist.description}}</span>
                                    </p>
                             </div>
                        </template>
            </template>
        </div>
        <div class="affirm-wrap">
            <button class="affirm" @click="savecheck"
                    >确定</button>
        </div>
    </div>
</template>
<script>
import standardItem from './standardItem'
import { XHeader, Tabbar, TabbarItem, Group, Cell } from 'vux'
export default {
    data () {
        return {
            menulist: [],
            childData: [],
            showarr: [],
            selectId: [],
            type: '',
             userId: '',
            tokenId: '',
            projectId: '',
            userInfo: ''
        }
    },
    components: {
        standardItem,
        XHeader
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
         this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.getData()
    },
    methods: {
        showmsg (index) {
            this.showarr[index] = !this.showarr[index]
            this.$forceUpdate()
            console.log(this.showarr)
        },
        getData () {
            let listget = [...this.$store.state.noticeHidden]
                console.log(listget)
                this.menulist = []
                listget.forEach(
                    (item, index) => {
                        let flag = true
                        for (var indexs = 0; indexs < this.menulist.length; indexs++) {
                            if (item.category == this.menulist[indexs].category) {
                                    this.menulist[indexs]['child'].push(item)
                                    flag = false
                            }
                            //   indexs++;
                        }
                        if (flag) {
                            this.menulist = [...this.menulist, {
                                category: item.category,
                                child: [item]
                            }]
                        }
                        console.log(this.menulist)
                    }
                )
                 this.type = this.$store.state.type
                if (this.type == 1) {
                        this.selectId = [...this.$store.state.selectidlist1]
                } else if (this.type == 2) {
                        this.selectId = [...this.$store.state.selectidlist2]
                } else if (this.type == 3) {
                        this.selectId = [...this.$store.state.selectidlist3]
                }

            if (this.selectId.length > 0) {
                this.selectId.forEach(
                    (itemitem) => {
                          this.menulist.forEach(
                                (item, index) => {
                                    if (item.child.length > 0) {
                                        (item.child).forEach(
                                            (itemlist, indexlist) => {
                                                if (itemitem == itemlist.categoryId) {
                                                     this.menulist[index]['child'][indexlist]['checked'] = true
                                                }
                                            }
                                        )
                                    }
                                }
                           )
                    }
                )
            }
        },
        selecteitem (item, index, indexlist) {
            //  debugger;
             this.menulist[index]['child'][indexlist]['checked'] = !this.menulist[index]['child'][indexlist]['checked']

             if (this.menulist[index]['child'][indexlist]['checked']) {
                  this.selectId = [...this.selectId, item.localId]
             } else {
                 this.selectId.forEach(
                    (items, indexnew) => {
                         if (item.localId == items) {
                             this.selectId.splice(indexnew, 1)
                         }
                    }
                 )
             }
             console.log(this.selectId)
            //  this.$forceUpdate();
        },
        selectaLL () {
             this.menulist.forEach(
                (item, index) => {
                    if (item.child.length > 0) {
                        (item.child).forEach(
                            (itemlist, indexlist) => {
                                 this.selecteitem(item, index, indexlist)
                            }
                        )
                    }
                }
             )
        },
        savecheck () {
             console.log(this.type, this.selectId)
            this.type = this.$store.state.type
             if (this.type == 1) {
                      this.$store.state.selectidlist1 = [...this.selectId]
                } else if (this.type == 2) {
                    this.$store.state.selectidlist2 = [...this.selectId]
                } else if (this.type == 3) {
                    this.$store.state.selectidlist3 = [...this.selectId]
                }

             this.$router.push({path: '/testing'})
        }
    }
}
</script>
<style scoped>
.page-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #ebeef2;
}
.standard-wrap {
    padding-bottom: 60px;
}
.affirm-wrap {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ebeef2;
}
.item-wrap {
    padding-left: 20px;
    background: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: 5px;
}
.affirm {
    position: relative;
    z-index: 2;
    display: block;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background: #2269ff;
    color: #fff;
    font-size: 15px;
    margin: 10px auto;
}

.lookmsg{
   color:#2269ff;
}
.lookmsgTwo{
  color:#000000;
}
.lookmsgTwo>span{
   margin-left:10px;
  color:#999999;
}
.lookmsg>span{
  margin-left:10px;
  color:#999999;
}
.card-padding{
  height:100px;
  width:230px;
  padding-right:30px;
}
.newImage{
  width:100px;
  height:74px;
  border-radius:7px;
  display:inline-block;
}
.contentlist{
  width:100%;
  height:106px;
  display:flex;
      justify-content: space-between;
      padding:16px 20px 16px 0;
          border-bottom: 1px solid #efeff4;
}
.card-title1{
  width:100%;
  height:15px;
  line-height:15px;
  font-size:15px;
  font-weight:bold;
  color:#333333;
  padding-top:4px;
}
.selectspan{
  margin-right:8px;
  color:#b0b0b0;
  font-size:14px;
}

.checkbox {
    margin-right: 10px;
    font-size: 16px;
}
.icon-selected {
    color: #2269ff;
}
 p {
    display: flex;
    line-height: 22px;
    color: #333;
    padding-right: 20px;
}
.standard-item li > div {
    flex: 1;
    padding-right: 20px;
}
.showmsg{
    margin-left:20px;
    padding-top:10px;
    padding-bottom:10px;
    border-bottom: 1px solid #efeff4;
}
.topnewtab{
    width:100%;
    height:40px;
    display:flex;
    justify-content:space-between;
    padding: 0 20px;
    background-color:#ebeef2;
    line-height:40px;
}
</style>
